<template>
	<view class="create-time">
		<xx-title title="创建球队" />
		<view class="sign-body">
			<view class="sign-title">创建球队</view>
			<view class="sign-item">
				<view class="sign-label required">赛事</view>
				<view class="sign-value">
					<select-picker v-model="state.model.gameId" :columns="state.matchList" @change="changeMatch" />
				</view>
			</view>
			<view class="sign-item">
				<view class="sign-label required">赛事级别</view>
				<view class="sign-value">
					<input type="text" v-model="state.model.levelStr" disabled />
				</view>
			</view>
			<view class="sign-item">
				<view class="sign-label required">组别</view>
				<view class="sign-value">
					<select-picker v-model="state.model.groupId" :columns="state.groupList" />
				</view>
			</view>
			<view class="sign-item">
				<view class="sign-label required">地区</view>
				<view class="sign-value">
					<select-picker :cascade="true" :map="{text:'name',
        value:'code'}" v-model="state.model.area" :columns="state.areaList" @change="change($event)" />
				</view>
			</view>
			<view class="sign-item">
				<view class="sign-label">机构</view>
				<view class="sign-value">
					<select-picker v-model="state.model.institutionId" :columns="state.institutionList" />
				</view>
			</view>
			<view class="sign-item">
				<view class="sign-label required">球队名称</view>
				<view class="sign-value">
					<input v-model="state.model.name" />
				</view>
			</view>
			<view class="sign-item">
				<view class="tips">领队、教练、助理教练的保险自行购买</view>
			</view>
			<view class="project-btn" :style="{paddingBottom:`calc(${bottomPadding}px + 24rpx)`}">
				<view class="personal-registration" @click="handleOk">提交</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, reactive } from 'vue';
	import { formValidate, showModal } from '@/utils/tools';
	import { createTeam, getMatchList, queryGroupAll, queryTeamDetail } from '@/api/team';
	import selectPicker from '@/components/selectPicker/index.vue'
	import { onLoad } from '@dcloudio/uni-app';
	import { getInstitution } from '@/api/match';
	import { getCityData } from '@/api/basisData';
	import { useStore } from "vuex";

	const store = useStore();
	onLoad((options : any) => {
		getTeamDetail(options.teamId)
	})

	const getTeamDetail = async (id) => {
		const res = await queryTeamDetail(id);
		state.model = { ...res.data, area: res.data.districtCode };
		console.log(state.model);
	}

	onMounted(() => {
		getMatchList().then(res => {
			if (res.code == 200) {
				state.matchList = res.data.map(item => {
					return {
						...item,
						value: item.id,
						text: item.name
					}
				})
			}
		})
		queryGroupAll().then(res => {
			if (res.code == 200) {
				state.groupList = res.data.map(item => {
					return {
						text: item.name,
						value: item.id,
					}
				})
			}
		})
		// 获取机构
		getInstitution().then(res => {
			if (res.code == 200) {
				state.institutionList = res.data.map((item : any) => {
					return {
						value: item.insCode,
						text: item.insName
					}
				})
			}
		})
		getCityData().then(res => {
			if (res.code == 200) {
				state.areaList = res.data.filter(item => item.code == "510000");
				// state.areaList = res.data;
				console.log(state.areaList)
			} else {
				state.areaList = []
			}
		}).catch(err => {
			state.areaList = []
		})

	})

	const changeMatch = (val) => {
		// 获取球队名称
		const match = state.matchList.find(item => item.id == val);
		if (match) {
			state.model.level = match.level;
			state.model.levelStr = match.level == 1 ? "市（州）" : "县（市区）"
		}


	}


	const bottomPadding = (uni.getSystemInfoSync().screenHeight as number) - (uni.getSystemInfoSync().safeArea.bottom as number)

	const state = reactive({
		model: {
			gameId: "",
			groupId: "",
			provinceCode: "",
			institutionId: "",
			name: "",
			area: '',
			level: "",
			levelStr: "",
		},
		matchList: [],
		groupList: [],
		areaList: [],
		institutionList: [],
	});

	const reg = /~[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·！#￥（——）：；“”‘、，|《。》？、【】[\]]/
	const formRule = {
		gameId: { message: '请选择赛事' },
		groupId: { message: '请选择组别' },
		provinceCode: { message: '请选择地区' },
		name: {
			// callback(val) {
			// 	debugger;
			// 	if (!reg.test(val)) {
			// 		return Promise.reject({ msg: "球队名称不能包含特殊字符" })
			// 	}

			// },
			message: "请输入球队名称"
		},
	}

	const change = (e) => {
		if (e.idList[0]) {
			state.model.provinceCode = e.idList[0].value
			state.model.provinceName = e.idList[0].text
		}
		if (e.idList[1]) {
			state.model.cityCode = e.idList[1].value
			state.model.cityName = e.idList[1].text
		}
		if (e.idList[2]) {
			state.model.districtCode = e.idList[2].value
			state.model.districtName = e.idList[2].text
		}
	}

	const handleOk = async () => {
		await formValidate(state.model, formRule);
		console.log(state.model)
		const res = await createTeam({ ...state.model, openid: store.state.user.openId });
		if (res.code == 200) {
			let message = "您已成功创建球队！";
			if (state.model.id) {
				message = "您已成功修改球队！"
			}
			showModal({ title: "温馨提示", content: message, showCancel: false }).then(res => {
				uni.redirectTo({ url: "/pages/teamTable/teamTable" })
			})
		}
	}
</script>

<style scoped lang="scss">
	.create-time {
		width: 100%;
		min-height: 100vh;
		padding-top: 1rpx;
		background-color: #F5F5F5;

		.sign-body {
			margin: 32rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			padding: 0 32rpx;

			.sign-title {
				padding: 24rpx 0;
				display: flex;
				align-items: flex-start;
				border-bottom: 1px solid #F5F5F5;
				font-weight: 500;
			}

			.sign-item {
				padding: 24rpx 0;
				display: flex;
				align-items: flex-start;
				border-bottom: 1px solid #F5F5F5;

				&.center {
					align-items: center;
				}

				&:last-child {
					border-bottom: none;
				}
				
				.tips {
					font-family: OPPOSans, OPPOSans;
					font-weight: normal;
					font-size: 28rpx;
					color: rgba(51, 51, 51, 0.4);
					line-height: 36rpx;
					text-align: right;
					font-style: normal;
				
				}

				.sign-label {
					color: #505363;
					font-size: 28rpx;
					width: 160rpx;

					&.required {
						position: relative;
						padding-left: 20rpx;

						&:before {
							content: '*';
							display: block;
							position: absolute;
							color: #ff3c3c;
							top: 0;
							left: 0;
						}
					}
				}

				.sign-value {
					width: calc(100% - 160rpx);
					font-size: 28rpx;
					color: #21252E;
					font-weight: 500;

					input {
						width: 100%;
						font-weight: 500;
					}

					textarea {
						background-color: #F5F5F5;
						border-radius: 12rpx;
						box-sizing: border-box;
						font-weight: 500;
						width: 100%;
						padding: 10rpx;
						height: 150rpx;
					}
				}
			}
		}
	}

	.project-btn {
		width: 100%;
		position: absolute;
		box-sizing: border-box;
		left: 0;
		bottom: 0;
		padding-left: 28rpx;
		padding-right: 28rpx;
		border-top: 1px solid #F1F2F4;
		padding-top: 14rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;

		.personal-registration {
			background: #92C75B;
			color: #FFFFFF;
			border-radius: 16rpx;
			width: 100%;
			padding: 16rpx 0;
			letter-spacing: 2rpx;
			font-weight: 500;
			text-align: center;

			&.disabled {
				background-color: #E5E5E5;
				color: #818496;
			}
		}
	}
</style>